<script setup>import { computed, defineProps, defineEmits } from 'vue'

const props = defineProps({
  options: Array,
  modelValue: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'primary'
  }
})

const emit = defineEmits(['update:modelValue'])

const selectedValue = computed({
  get() {
    return props.modelValue || ''
  },
  set(value) {
    emit('update:modelValue', value || '')
  }
})
</script>

<template>
  <el-radio-group
      v-model="selectedValue"
      @change="selectedValue = $event"
  >
    <el-radio-button
        v-for="(item, index) in options"
        :key="index"
        :label="item.key"
        :type="type"
    >
      {{ item.name }}
    </el-radio-button>
  </el-radio-group>
</template>

<style scoped lang="scss">
:deep(.el-radio-group) {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

:deep(.el-radio-button) {
  margin-right: 8px;
  margin-bottom: 8px;
}

:deep(.el-radio-button__inner) {
  border-radius: 4px;
}
</style>